<template>
  <div>
    <el-select
      v-bind="$attrs"
      filterable
      remote
      :remote-method="remoteMethod"
      :loading="loading"
      remote-show-suffix
    >
      <el-option
        v-for="item in options"
        :key="item.gatewayId"
        :label="item.gatewayName"
        :value="item.gatewayId"
      />
    </el-select>
  </div>
</template>
<script setup>
import { getGatewayops } from "@/api/operate/device-management/index";
const options = ref([]);
const list = ref([]);
const props = defineProps({
  gatewayType: {
    type: Number,
    default: 1
  }
});
getGatewayops({ gatewayType: props.gatewayType}).then(res => {
  options.value = res.result;
  list.value = res.result;
});

const loading = ref(false);
const remoteMethod = query => {
  if (query) {
    loading.value = true;
    setTimeout(() => {
      loading.value = false;
      options.value = list.value.filter(item => {
        return item.nickname.includes(query);
      });
    }, 200);
  } else {
    options.value = list.value;
  }
};
</script>
<style lang="scss" scoped></style>
